/*顶部导航器
  依赖：react-native-tab-view   @react-navigation/material-top-tabs  react-native-pager-view
*/
import React from 'react';
import {
  createMaterialTopTabNavigator,
  MaterialTopTabBarProps,
  // MaterialTopTabBar,
} from '@react-navigation/material-top-tabs';
import {StyleSheet} from 'react-native';
import TopTabBarWrapper from '@/pages/Views/TopTabBarWrapper';
import Home from '@/pages/Home';
import {RootState} from '@/models/index';
import {connect, ConnectedProps} from 'react-redux';
import {ICategory} from '@/models/category';
import {createHomeModel} from '@/config/dva';

export type HomeParamList = {
  [key: string]: {
    namespace: string;
  };
};

const Tab = createMaterialTopTabNavigator<HomeParamList>();

const mapStateToProps = ({category}: RootState) => {
  return {
    myCategorys: category.myCategorys,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {}

const HomeTabs: React.FC<IProps> = props => {
  const {myCategorys} = props;
  const renderTabBar = (renderTabBarProps: MaterialTopTabBarProps) => {
    return (
      // <View style={{backgroundColor: 'red', height: 100}}>
      //   <MaterialTopTabBar {...props} />
      // </View>
      <TopTabBarWrapper {...renderTabBarProps} />
    );
  };
  const renderScreen = (item: ICategory) => {
    createHomeModel(item.id);
    return (
      <Tab.Screen
        key={item.id}
        name={item.id}
        component={Home}
        options={{tabBarLabel: item.name}}
        initialParams={{namespace: item.id}}
      />
    );
  };
  return (
    <Tab.Navigator
      lazy //标签页懒加载
      tabBar={renderTabBar}
      sceneContainerStyle={styles.sceneContainerStyle}
      tabBarOptions={{
        scrollEnabled: true, //超出屏幕时不再挤压  使可以滚动选择
        tabStyle: {width: 80}, //每个tab宽度
        //下方选择是小横条样式
        indicatorStyle: {
          height: 4,
          width: 20,
          marginLeft: 30,
          borderRadius: 2,
          backgroundColor: '#f86442',
        },
        activeTintColor: '#f86442', //选中时的字体颜色
        inactiveTintColor: '#333', //为选中时的字体颜色
      }}>
      {myCategorys.map(renderScreen)}
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  sceneContainerStyle: {
    backgroundColor: 'transparent',
  },
});
export default connector(HomeTabs);
